<template>
  <div class="box">
    <div class="checkAll"
         v-if="!flag">
      <van-checkbox v-model="checked"
                    checked-color="#ee0a24"
                    @click="isallCheck">全选</van-checkbox>
    </div>
    <div class="left">
      <span class="total">合计：</span>
      <span class="yen">&yen;</span>
      <span class="price">{{this.$store.state.checkedAllPrice}}</span>
    </div>
    <wd-button v-if="flag"
               type="error"
               @click="$store.commit('showPopup')">提交订单</wd-button>
    <wd-button v-else
               type="error"
               :loading="loading"
               @click="toSettle">去结算({{this.$store.state.checkedNum}})</wd-button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'SubmitOrder',
  data() {
    return {
      checked: false,
      loading:false
    }
  },
  props: {
    flag: {
      type: Boolean,
      default() {
        return true
      }
    },
  },
  methods: {
    toSettle() {
      if (this.$store.state.checkedAllPrice == 0) {
        this.$toast.info('未选中任何商品')
      } else if (this.$store.state.cannotSubmit) {
        this.$toast.error('收货地址为空')
      } else {
        this.loading = true
        this.$router.push({ path: 'makesure' })
      }
    },
    isallCheck() {
      // console.log(this.$store.state.allNotCheck);
      this.$store.state.allNotCheck = true
      this.$store.state.allCheck = this.checked
    }
  },
  created() {
    this.checked = this.$store.state.allCheck
  },
  computed: {
    ...mapState({
      allCheck: state => state.allCheck
    })
  },
  watch: {
    allCheck: {
      handler(newValue) {
        this.checked = newValue
        this.$store.state.allNotCheck = false
      }
    }
  },
}
</script>

<style lang='less' scoped>
.box {
  position: fixed;
  bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background-color: white;
  box-sizing: border-box;
}
.left {
  display: flex;
  align-items: center;
  height: 100%;
}
.total {
  color: rgba(16, 16, 16, 0.64);
  font-size: 14px;
  font-weight: 550;
}
.yen,
.price {
  margin-left: 5px;
  color: #ec0d0d;
  font-size: 14px;
  font-weight: 600;
}
.price {
  font-size: 20px;
}
.wd-button.is-error {
  background-color: #ec0d0d;
  font-weight: 550;
}

.checkAll {
  position: relative;
  top: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
</style>